<template>
	<view class="root-warp">
		<view class='rotation-chart-warp'>
			<swiper 
				class="swiper" 
				circular 
				:indicator-dots="indicatorDots" 
				:autoplay="true" 
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(src, index) in rotationChartSrcs" 
					:key='index'>
					<image :src="src" />
				</swiper-item>
			</swiper>
			<view class="function-option">
				<view 
					class="function-option-item"
					v-for="(item, falg) in functionOptionSrcs" 
					:key="falg"
					@tap="toPage(item.pageUrl)">
					<image :src="item.icon" />
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="line-warp">
			<text class="title">热门线路</text>
			<view class="line-list">
				<RouterItem
					v-for="(router, tager) in lineList"
					:key="router.id"
					:fromCity="router.fromCity || ''"
					:endCity="router.endCity || ''"
					:ticketPrice="router.ticketPrice"
					@toTickets="toTickets(router)"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	import { mixins } from '../../common/mixins.js';
	import api from '../../api';
	import RouterItem from './components/RouterItem.vue'
	export default {
		mixins: [mixins],
		components: {
			RouterItem
		},
		data() {
			return {
				rotationChartSrcs: [
					"../../static/icon_index_bg.jpg",
				],
				functionOptionSrcs: [
					{
						icon: "../../static/icon_ticket_purchase.png",
						text: "购票",
						pageUrl: "/pages/buyTickets/line",
					}, 
					{
						icon: "../../static/icon_commerce.png",
						text: "带货",
						pageUrl: "/pages/index/commerce",
					},
					{
						icon: "../../static/icon_charter.png",
						text: "包车",
						pageUrl: "charter",
					},
					// {
					// 	icon: "../../static/icon_discount.png",
					// 	text: "优惠",
					// 	pageUrl: "",
					// }
				],
				lineList: []
			}
		},
		
		onPullDownRefresh() {
			this.getAllRoute();
		},
		
		onLoad() {
			uni.startPullDownRefresh();
		},
		methods: {
			onShareAppMessage (){
				return {
						    title: "大营汽运",
						    path: "pages/index/index",  //页面路径及参数
						    // imageUrl:this.config.BIZ_SHARE_URL + "?temp=" + Date.parse(new Date()),  //图片链接，必须是网络连接，后面拼接时间戳防止本地缓存
						}
			},
			// 功能区跳转
			toPage(pageUrl) {
				if(this.checkToken()){
					uni.navigateTo({url: pageUrl});
				}
				else {
					this.toLogin();
				}
			},
			
			// 登录 获取微信用户信息
			login(){
				// 获取openid
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						const { code } =  api.login.login({code: loginRes.code});
						if(res.code === 200) {
							uni.getUserProfile({
								desc: 'weixin',
								success: (infoRes) => {
									this.nickName = infoRes.userInfo.nickName; //昵称
									this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
									//页面跳转到登录页面
									uni.redirectTo({
										url: '../LoginBusiness/LoginBusiness',
									});
								},
								fail: (fail) => {
									console.log("fail:", fail)
								}
							});
						}
					}
				});
			},
			
			// 获取路线
			async getAllRoute() {
				try {
					const { code, data = [] } = await api.route.getAllRoute();
					this.lineList = data;
				} catch (error) {
					uni.stopPullDownRefresh();
				} finally {
					uni.stopPullDownRefresh();  //停止下拉刷新动画
				}
			},
			
			// 热门线路跳转购票
			toTickets(data) {
				uni.navigateTo({
					url: `../buyTickets/buyTickets?router=${JSON.stringify(data)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.root-warp {
		background: #F7F7F7;
		height: 100%;
	}
	.rotation-chart-warp {
		height: 330upx;
		width: 100%;
		position: relative;
		.swiper {
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.function-option {
			position: absolute;
			bottom: -90upx;
			height: 150upx;
			border-radius: 16upx;
			width: 96%;
			margin-left: 2%;
			background: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			.function-option-item {
				display: flex;
				flex-direction: column;
				text-align: center;
				font-size: 30rpx;
				padding-top: 10upx;
				padding-bottom: 5upx;
				image {
					width: 90upx;
					height: 90upx;
				}
			}
		}
	}
	.line-warp {
		margin-top: 100upx;
		padding-left: 2%;
		padding-right: 2%;
		.title {
			font-size: 34rpx;
			font-weight: bold;
		}
		.line-list {
			background: #FFFFFF;
			border-radius: 16upx;
			margin-top: 20upx;
		}
	}
</style>
